<template>
	<div class="safetyloop">
		<div class="search_has_classify">
			<div class="fy_cell_select">
   			 	<i class="ion ion-chevron-down arrow"></i>
		        <select class="fy_select fy_cell_hd" v-model="picked" @change="getselectData()">
		       	 	<option value="">所有内容</option>

	        		<option v-for="option in options" :value="option.value">{{option.text}}</option>
		        </select>
	        </div>
			<div class="weui_search_bar" :class="{weui_search_focusing:isFocus}">
			    <div class="weui_search_outer">
			        <div class="weui_search_inner">
			            <i class="ion ion-ios-search"></i>
			            <input type="text" class="weui_search_input" name="searchParam" ref="searchInput" placeholder="搜索" required="" >
			            <a href="javascript:" class="ion ion-ios-close" @click="searchClear"></a>
			        </div>
			        <label for="search_input" class="weui_search_text" @click='searchFocus'>
			            <i class="ion ion-ios-search"></i>
			            <span>搜索</span>
			        </label>
			    </div>
			    <a href="javascript:" class="weui_search_cancel" @click="searchBlur">搜索</a>
			</div>
		</div>

		<ul class="safety_loop" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<router-link v-for="list of safetyloopData" :to="{path:list.detailUrl,query:{id:list.relationId,empNo:personalId}}" tag="li" class="safety_loop_li">
			    <p class="safety_loop_p"></p>
			    <div class="safety_loop_div">
			    	<img :src="list.shareImg">
			    </div>				
				<div class="img_wrap">
					<span class="head" v-if="list.empImg">
						<img :src="list.empImg">
					</span>
					<span class="head" v-else="list.empImg">
						<img src="../../assets/img/head_img.jpg">
					</span>
					<span  @click.stop='thumbsUp(list)' class="iflike" :class="[list.ifLike? 'ion_heart_red' : 'ion_heart_default']"></span>
					<h3>{{list.shareTitle}}</h3>   
				</div>
				<p class="author">by {{list.empName}}</p>
				<footer class="foot clearFix">
					<span class="time"><i class="ion ion-android-time"></i>{{list.shareTime}}</span>
					<span class="like"><i class="ion ion-ios-heart-outline"></i> {{list.likeCount}}</span>
					<span class="classify"><i class="icon_mark"></i>{{list.dataTypeText}}</span>
				</footer>
			</router-link>
			<li class="no_data" v-if="hasNoData">
				<i class="ion ion-ios-paper-outline"></i>
				<p>暂无数据</p>
			</li>
		</ul>

	</div>
</template>
<script type="text/javascript">
	import safetyloopStyle from '../../assets/css/safetyloop.scss'

	import getInterface from '../../assets/js/insterface'
	import getQuery from '../../assets/js/get_querys'

	export default{
		mixins:[getQuery],
		data(){

			return{
				personalId:'',
				isFocus:false,
				safetyloopUrl:getInterface.getsafetyLoopUrl,
				isPraiseUrl:getInterface.isPraiseUrl,
				safetyloopData:[],
				hasNoData:false,
				picked:'',
				pageTotal:'',

				count:0,
				busy:false,

				options:[
					{value:'0',text:'NM'},
					{value:'1',text:'safe to go'},
					{value:'2',text:'safety meeting'},
					{value:'3',text:'SOC'}
				]


			}
		},
		mounted(){
			this.$el.parentElement.parentNode.style.background = '#fafafa';
			document.title="安全圈";
			let query = this.getQuerys();
      		this.personalId = query.empNo;
			this.getSafetyLoopData();

		},
		methods:{
			searchFocus(){
				let searchInput = this.$refs.searchInput;
				searchInput.focus();
				this.isFocus = true;
			},
			// searchCancel(){
			// 	let searchInput = this.$refs.searchInput;
			// 	searchInput.value = '';
			// 	this.isFocus=false;
			// 	this.safetyloopData = [];
			// 	this.count = 0;
			// 	this.getSafetyLoopData();

			// },
			searchBlur(){
				let searchInput = this.$refs.searchInput;
				if(searchInput.value != ''){
					this.isFocus = true;
				}else{
					this.isFocus = false;
				}
				this.safetyloopData = [];
				this.count = 0;

				this.getSafetyLoopData();

			},
			searchClear(){
				let searchInput = this.$refs.searchInput;
				searchInput.value = '';
				this.safetyloopData = [];
				this.count = 0;
				this.getSafetyLoopData();

			},
			getselectData(){
				this.safetyloopData = [];
				this.count = 0;
				this.getSafetyLoopData();
			},
			loadMore(){
				let vue = this;
		       this.busy = true;
		       if(this.pageTotal > this.count && this.safetyloopData.length > 0){
			      setTimeout(() => {
			        vue.getSafetyLoopData();
			      }, 1000);
		        }

			},
			getSafetyLoopData(){
				let searchInput = this.$refs.searchInput;
				let title = searchInput.value;

				let type = this.picked;

				let param ={
					'pageSize':10,
					'currentPage':this.count,
					'title':title,
					'type':type,
					'empNo':this.personalId
				}

				this.$http.post(this.safetyloopUrl,param,{emulateJSON: true})
				.then((response) => {
					console.log(response);
					// console.log(response.data.resType);
					if(response.data.resType == "00"){
						let responseData = response.data.data;
						let resDataLen = responseData.length;
						this.pageTotal = response.data.pages;

						if(resDataLen > 0){
							this.hasNoData = false;

							if(this.pageTotal > this.count){
								for(let i=0; i<resDataLen; i++){
									this.safetyloopData.push(responseData[i])
								}
								this.count++;
							}


							for(let value of this.safetyloopData){

								value.ifLike = parseInt(value.ifLike);

								let shareTime = value.shareTime;
								value.shareTime = shareTime.substring(0,10)

								if(value.shareImg.indexOf(",") != -1){
									value.shareImg = value.shareImg.substring(0,value.shareImg.indexOf(","));
								}

								switch(value.dataType){
									case 0:
										value.dataType = '0';
										value.dataTypeText= 'NM';
										value.detailUrl = '/getNmDetail';
										break;
									case 1:
										value.dataTypeText = 'safe to go';
										value.detailUrl = '/getSafeToGoDetail';
										break;
									case 2:
										value.dataTypeText = 'safety meeting';
										value.detailUrl = '/getsafetyMeetingDetail';
										break;
									case 3:
										value.dataTypeText = 'SOC';
										value.detailUrl = '/getSocDetail';
										break;
								}
							}
						}else{
							this.hasNoData = true;
						}
						this.busy = false;

					}else{
						console.log(response.data.msg);

					}
				})
			},
			thumbsUp(list){
				debugger
				if(list.ifLike=="0"){
			    	let params = {id:list.relationId,empNo:this.$route.query.empNo,shareTime:list.shareTime}
			    	this.$http.post(this.isPraiseUrl,params,{emulateJSON: true})
			    	.then((response) => {
			    		console.log(response)			    		
		    			if(response.data.type == "2"){
		    				console.log("点赞成功！")
					      	list.ifLike = 1;
					      	if(list.likeCount == undefined || list.likeCount == null){
					      		list.likeCount = 0;
					      	}
					      	list.likeCount++;
					      }else{
					      	console.log("点赞失败！")
					      }				    
			    	})
			    	.catch(function(response){
			    		console.log(response)
			    	})
		    	}else{
				    console.log("您已点过赞！")
				}
		    }
		}
	}
</script>